import React, { useMemo } from 'react'
import { observer, FormProvider, createSchemaField } from '@formily/react'
import {
  ArrayItems,
  FormItem,
  Space,
  Input,
  Radio,
  Switch,
  Select,
  NumberPicker,
} from '@formily/antd'
import { DrawerSetter, ValueInput } from '@designable/react-settings-form'
import { createForm, onFieldChange } from '@formily/core'
import { useDialogInstances } from '@designable/react'
import { ExpressionDialogSetter } from '../ExpressionDialogSetter'

export interface IToolBarRenderSetterProps {
  value?: any
  onChange?: (value: any) => void
}

const SchemaField = createSchemaField({
  components: {
    ArrayItems,
    Input,
    Space,
    FormItem,
    DrawerSetter,
    Radio,
    Switch,
    Select,
    ValueInput,
    NumberPicker,
    ExpressionDialogSetter,
  },
})

export const ToolBarRenderSetter: React.FC<IToolBarRenderSetterProps> =
  observer((props) => {
    const form = useMemo(
      () =>
        createForm({
          initialValues: props.value,
          effects: (form) => {
            onFieldChange('*', () => {
              props.onChange?.(form.getState().values)
            })
          },
        }),
      []
    )

    const { getAll } = useDialogInstances()
    const dialogList: any = getAll()

    return (
      <FormProvider form={form}>
        <SchemaField>
          <SchemaField.Array
            name="data"
            x-component="ArrayItems"
            x-component-props={{
              style: { background: '#eee', marginBottom: 10, padding: 10 },
            }}
          >
            <SchemaField.Object>
              <SchemaField.Void
                x-component="Space"
                x-component-props={{
                  style: {
                    background: '#fff',
                    padding: 6,
                    marginBottom: 10,
                  },
                }}
              >
                <SchemaField.Void x-component="ArrayItems.SortHandle" />
                <SchemaField.String
                  x-decorator="FormItem"
                  x-decorator-props={{
                    style: { padding: 0, margin: 0 },
                  }}
                  required
                  name="text"
                  x-component="Input"
                  x-component-props={{
                    placeholder: '按钮文字',
                  }}
                />
                <SchemaField.Void
                  x-component="DrawerSetter"
                  x-component-props={{
                    text: '编辑',
                    triggerProps: {
                      style: {
                        height: 30,
                      },
                    },
                  }}
                >
                  <SchemaField.String
                    x-decorator="FormItem"
                    x-decorator-props={{
                      label: '按钮文字',
                    }}
                    required
                    name="text"
                    x-component="Input"
                  />
                  <SchemaField.String
                    x-decorator="FormItem"
                    x-decorator-props={{
                      label: '权限标识',
                    }}
                    required
                    name="accessKey"
                    x-component="Input.TextArea"
                  />
                  <SchemaField.Boolean
                    x-decorator="FormItem"
                    x-decorator-props={{
                      label: '启用确认框',
                    }}
                    name="usePopconfirm"
                    x-component="Switch"
                  />
                  <SchemaField.String
                    x-decorator="FormItem"
                    x-decorator-props={{
                      label: '确认文案',
                    }}
                    name="popconfirmTitle"
                    x-component="Input.TextArea"
                    x-component-props={{
                      placeholder: '确定要执行该操作吗？',
                      defaultValue: '确定要执行该操作吗？',
                    }}
                    x-reactions={{
                      dependencies: ['.usePopconfirm'],
                      fulfill: {
                        state: {
                          visible: '{{$deps[0] === true}}',
                        },
                      },
                    }}
                  />
                  <SchemaField.String
                    x-decorator="FormItem"
                    x-decorator-props={{
                      label: '按钮风格',
                    }}
                    name="buttonType"
                    x-component="Select"
                    x-component-props={{
                      defaultValue: 'default',
                      options: [
                        { label: '默认', value: 'default' },
                        { label: '主要', value: 'primary' },
                        { label: '虚线', value: 'dashed' },
                        { label: '链接', value: 'link' },
                        { label: '文本', value: 'text' },
                      ],
                    }}
                  />
                  <SchemaField.String
                    x-decorator="FormItem"
                    x-decorator-props={{
                      label: '按钮尺寸',
                    }}
                    name="size"
                    x-component="Select"
                    x-component-props={{
                      allowClear: true,
                      options: [
                        { label: '默认', value: 'middle' },
                        { label: '大', value: 'large' },
                        { label: '小', value: 'small' },
                      ],
                    }}
                  />
                  <SchemaField.String
                    x-decorator="FormItem"
                    x-decorator-props={{
                      label: '图标',
                    }}
                    name="icon"
                    x-component="Input"
                    x-component-props={{
                      placeholder: 'AntdIcon 名称，如 PlusOutlined',
                    }}
                  />
                  <SchemaField.Boolean
                    x-decorator="FormItem"
                    x-decorator-props={{
                      label: '禁用',
                    }}
                    name="disabled"
                    x-component="ExpressionDialogSetter"
                  />
                  <SchemaField.Boolean
                    x-decorator="FormItem"
                    x-decorator-props={{
                      label: '隐藏',
                    }}
                    name="visible"
                    x-component="ExpressionDialogSetter"
                  />
                  <SchemaField.String
                    x-decorator="FormItem"
                    x-decorator-props={{
                      label: '选择弹窗',
                    }}
                    name="dialog"
                    x-component="Select"
                    x-component-props={{
                      options: dialogList,
                      allowClear: true,
                    }}
                  />
                  <SchemaField.Boolean
                    x-decorator="FormItem"
                    x-decorator-props={{
                      label: '点击事件',
                    }}
                    name="customExpression"
                    x-component="ExpressionDialogSetter"
                  />
                </SchemaField.Void>
                <SchemaField.Void x-component="ArrayItems.Remove" />
              </SchemaField.Void>
            </SchemaField.Object>

            <SchemaField.Void
              x-component="ArrayItems.Addition"
              title="添加按钮"
            />
          </SchemaField.Array>
        </SchemaField>
      </FormProvider>
    )
  })
